<template>
  <a-modal
    :footer="false"
    v-model:visible="modalVisible"
    @ok="handleOk"
    @cancel="handleCancel"
    width="1000px"
  >
    <template #title> 明细列表 </template>
    <div>
      <a-table :columns="columns" :data="data" :pagination="false" />
      <!-- <tableTurn :tableData="getData" :args="args" ref="tableTurnRef">
        <a-table-column :width="80" align="center">
          <template #title> 序号 </template>
          <template #cell="{ rowIndex }">
            {{ rowIndex + 1 }}
          </template> 
        </a-table-column>
        <a-table-column
          :title="item.name"
          v-for="(item, index) in selectedHeader"
          :key="index"
          :data-index="item.code"
          align="center"
          :width="200"
        >
        </a-table-column>
      </tableTurn> -->
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { cloneDeep } from 'lodash';
  import { reactive, computed, watchEffect, onMounted, ref } from 'vue';
  import { localGetUserInfo } from '@/utils/localStorage/account';

  const props = withDefaults(
    defineProps<{
      SeeDate: any;
      visible: boolean;
    }>(),
    {
      visible: false,
    }
  );

  //   // 表格配置
  //   const args = reactive({
  //     stripe: true,
  //     rowSelection: {
  //       type: 'checkbox',
  //       showCheckedAll: true,
  //       onlyCurrent: false,
  //     },
  //     scroll: {
  //       y: 500,
  //     },
  //     bordered: {
  //       headerCell: true,
  //     },
  //     rowKey: 'name', // 批量选择按钮 以合同名称来作为key
  //   });

  const columns = reactive([
    { id: 2, title: '产品编码', dataIndex: 'number' },
    { id: 3, title: '产品名称', dataIndex: 'name' },
    { id: 4, title: '产品规格', dataIndex: 'spec' },
    // { id: 5, title: '产品型号', dataIndex: 'model' },
    // { id: 6, title: '指导单价', dataIndex: 'guidePrice' },
    // { id: 7, title: '折扣', dataIndex: 'dept' },
    { id: 8, title: '产品数量', dataIndex: 'amount' },
    // { id: 9, title: '合计', dataIndex: 'num' },
  ]);

  const emit = defineEmits(['update:visible', 'addRoleEmit']);

  // 判断用户是否显示弹出框
  const modalVisible = computed({
    get() {
      return props.visible;
    },
    set(visible: boolean) {
      emit('update:visible', visible);
    },
  });

  const data = ref([]);

  const getData = () => {
    data.value = props.SeeDate;
    data.value.map((i) => {
      i.num = i.amount * i.guidePrice;
      return i;
    });
    return Promise.resolve(data.value);
  };

  const rules = reactive({});

  watchEffect(() => {
    if (props.visible) {
      getData();
    }
  });
</script>

<style scoped lang="less">
  :deep(.arco-table-tr) {
    height: 40px;
  }
  :deep(.arco-table-th) {
    font-weight: bold;
    // font-size: 13px;
  }
</style>
